@charset "UTF-8";

/*弹出框主要样式*/

.dialog-wrap {
    z-index: 1000;
    position: fixed;
    z-index: 1000;
    left: -100%;
    top: -100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    &:after {
        content: "";
        background: rgba(0, 0, 0, .6);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        -webkit-transition: .2s all;
        transition: .2s all;
        opacity: 0;
    }
    &.dialog-show {
        left: 0;
        top: 0;
        &:after {
            opacity: 1
        }
        .dialog-main {
            -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        .action-main{
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
            opacity: 1
        }
    }
}

.dialog-main {
    position: absolute;
    width: r(560);
    background: #fff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
    -webkit-transition: .2s all;
    transition: .2s all;
    opacity: 0;
    border-radius: $round;
    z-index: 2
}

.dialog-title {
    text-align: center;
    padding-top: r(30);
    color: $font-color-main;
    font-size: r(36)
}

.dialog-content {
    font-size: r(30);
    padding: r(30);
    line-height: 1.4em
}

.dialog-footer {
    border-top: 1px solid $border-color;
    >* {
        padding: r(20);
        font-size: r(30);
        border-right: 1px solid $border-color;
        &:last-child {
            border: none
        }
    }
}

.action-main {
    position: absolute;
    z-index: 2;
    width: 100%;
    bottom: 0;
    padding: r(20) r(30);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
    opacity: 0;
    button {
        width: 100%;
        height: r(88);
        border-bottom: 1px solid $border-color;
        background: #fff;
        font-size: r(30);
        &:last-child {
            border: none;
        }
    }
    .action-cancel {
        margin-top: r(20);
        border-radius: $round;
        @include bg-main;
    }
}

.action-content {
    border-radius: $round;
    overflow: hidden;
}